import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        charset: false,
        // 这里可以配置LESS的全局变量等
        additionalData: ['@import "./src/assets/main.less";'],
        modifyVars: {
          'input-color-bg': `var(--color-transparent)`,
          'input-color-bg_hover': `var(--color-transparent)`,
          'picker-color-bg_hover': `var(--color-transparent)`,
          'picker-color-border': `var(--color-text-4)`,
          'input-color-border': `var(--color-text-4)`,
          'picker-color-border_hover': `var(--color-text-4)`,
          'input-color-border_hover': `var(--color-text-4)`
          // 'menu-dark-color-icon_hover': `var(--color-white)`,
          // 'menu-dark-color-bg': 'rgba(0,0,0,1)',
          // 'menu-dark-color-bg-item_hover': 'rgba(54,54,54,1)',
          // 'menu-dark-color-submenu_selected': `var(--color-bg-white)`,
          // 'color-menu-dark-bg': 'rgba(0,0,0,1)',
          // 'menu-dark-color-bg-item_default': `var(--menu-dark-color-bg)`,
          // 'menu-dark-color-icon_selected': `var(--color-white)`,
          // 'menu-dark-color-item_hover': `var(--color-white)`

          // 'menu-light-color-bg-item_selected': '#165DFF',
          // 'menu-light-color-item_default': `var(--color-text-1)`,
          // 'menu-light-color-bg': '#fbfbfd',
          // 'color-menu-light-bg': '#fbfbfd',
          // 'menu-light-color-icon_default': `var(--color-text-1)`,
          // 'menu-light-color-item_selected': `var(--color-bg-white)`,
          // 'menu-light-color-icon_selected': `var(--color-bg-white)`,
        }
      }
    }
  },
  plugins: [
    vue(),
    vueJsx(),
    VueDevTools(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ArcoResolver()]
    }),
    Components({
      resolvers: [
        ArcoResolver({
          importStyle: 'less',
          sideEffect: true
        })
      ]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
